import React, {FC, forwardRef, ForwardRefExoticComponent, HTMLAttributes, Ref, RefAttributes, useContext} from 'react';
import "./index.less";
import classNames from "classnames";
import {HxConfigContext} from "@/layouts/HxConfigContext";

type HxCyCardProps = {
  icon?: React.ReactNode;
  title: React.ReactNode;
  subtext?: React.ReactNode;
  subtextVisiable?: boolean;
  className?: string;
  children?: React.ReactNode;
  extra?: React.ReactNode;
  size?: "small" | "large";
}

const HxCyCard: ForwardRefExoticComponent<HxCyCardProps & RefAttributes<HTMLDivElement>> = React.forwardRef<HTMLDivElement, HxCyCardProps>((props, ref) => {
  const {isZhCN} = useContext(HxConfigContext)
  const {size = "large", icon, title, subtext, className, children, extra, subtextVisiable=true} = props;
  return (
    <div ref={ref} className={classNames("hx-cy-card", className, `hx-cy-card-${size}`)}>
      <div className={"hx-cy-card-header"}>
        <div className={"hx-cy-card-header-inner"}>
          {icon && <div className={"hx-cy-card-icon"}>{icon}</div>}
          <div className={"hx-cy-card-title"}>{isZhCN ? title: subtext}</div>
          {(subtext && subtextVisiable) && <div className={"hx-cy-card-subtext"}>{isZhCN ? subtext: title}</div>}
        </div>
        {extra && <div className={"hx-cy-card-extra"}>{extra}</div>}
      </div>
      <div className={"hx-cy-card-content"}>
        {children}
      </div>
    </div>
  );
});

export default HxCyCard;
